<template>
  <div class="user-auth">
    <a-card :body-style="{ padding: '32px' }" :bordered="false">
      <div class="auth-title">
        <div class="title">认证会员申请 - 3.基本信息填写</div>
        <div class="desc">
          基本资料以实名信息为准，以下信息仅供参考，填写信息方便我们更好的为您服务。
        </div>
      </div>
      <div class="auth-content">
        <a-steps :current="2">
          <a-step
            v-for="item in [
              '材料准备',
              '材料信息上传',
              '基本信息填写',
              '完成待审核',
              '认证成功'
            ]"
            :key="item"
            :title="item"
          />
        </a-steps>
        <a-form-model
          :model="model"
          ref="form"
          :rules="rules"
          style="margin-top: 40px;"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 12 }"
          @submit="onSubmit"
        >
          <div class="v-title">主体信息</div>
          <a-form-model-item :label="rules.cName[0].title" prop="cName">
            <a-input
              :disabled="true"
              v-model="model.cName"
              :placeholder="rules.cName[0].message"
            />
          </a-form-model-item>

          <a-form-model-item :label="rules.cardType[0].title" prop="cardType">
            <a-select v-model="model.cardType">
              <a-select-option
                v-for="item in config.c_note_type"
                :value="item"
                :key="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item :label="rules.cLength[0].title" prop="cLength">
            <a-date-picker
              @change="handleDateChange"
              :placeholder="rules.cLength[0].message"
              :value="model.cLength"
            ></a-date-picker>
          </a-form-model-item>

          <a-form-model-item :label="rules.cType[0].title" prop="cType">
            <a-select v-model="model.cType">
              <a-select-option
                v-for="item in config.c_type"
                :value="item"
                :key="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item :label="rules.cCard[0].title" prop="cCard">
            <a-input
              v-model="model.cCard"
              :placeholder="rules.cCard[0].message"
            />
          </a-form-model-item>

          <a-form-model-item :label="rules.cAddress[0].title" prop="cAddress">
            <a-input
              v-model="model.cAddress"
              :placeholder="rules.cAddress[0].message"
            />
          </a-form-model-item>

          <a-form-model-item :label="rules.cArea[0].title" prop="cArea">
            <a-select
              :default-value="address.province.name"
              @change="code => handleSelect('province', code, provinces[code])"
              style="width: 108px"
            >
              <a-select-option v-for="(name, code) in provinces" :key="code">
                {{ name }}
              </a-select-option>
            </a-select>
            <a-select
              :default-value="address.city.name"
              @change="code => handleSelect('city', code, cities[code])"
              style="width: 108px; margin-left: 8px;"
            >
              <a-select-option v-for="(name, code) in cities" :key="code">
                {{ name }}
              </a-select-option>
            </a-select>

            <a-select
              :default-value="address.county.name"
              @change="code => handleSelect('county', code, counties[code])"
              style="width: 108px; margin-left: 8px;"
            >
              <a-select-option v-for="(name, code) in counties" :key="code">
                {{ name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item :label="rules.cStreet[0].title" prop="cStreet">
            <a-input
              v-model="model.cStreet"
              :placeholder="rules.cStreet[0].message"
            />
          </a-form-model-item>

          <!-- <div class="v-title">业务信息</div>
          <a-form-model-item :label="rules.cWork[0].title" prop="cWork">
            <a-select v-model="model.cWork">
              <a-select-option
                v-for="item in config.c_types"
                :value="item.name"
                :key="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item :label="rules.cProduct[0].title" prop="cProduct">
            <a-select v-model="model.cProduct">
              <a-select-option
                v-for="item in currentProduct"
                :value="item.name"
                :key="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item> -->
          <a-form-model-item :label="rules.cWeb[0].title" prop="cWeb">
            <a-input
              v-model="model.cWeb"
              :placeholder="rules.cWeb[0].message"
            />
          </a-form-model-item>

          <!-- <div class="v-title">联系信息</div>
          <a-form-model-item :label="rules.country[0].title" prop="country">
            <a-input
              v-model="model.country"
              :placeholder="rules.country[0].message"
            />
          </a-form-model-item> -->
          <!-- <a-form-model-item :label="rules.area[0].title" prop="area">
            <a-input
              v-model="model.area"
              :placeholder="rules.area[0].message"
            />
          </a-form-model-item> -->

          <!-- <a-form-model-item :label="rules.cPhone[0].title" prop="cPhone">
            <a-input
              v-model="model.cPhone"
              :placeholder="rules.cPhone[0].message"
            />
          </a-form-model-item> -->
          <!-- <a-form-model-item :label="rules.cSend[0].title" prop="cSend">
            <a-input
              v-model="model.cSend"
              :placeholder="rules.cSend[0].message"
            />
          </a-form-model-item> -->

          <div class="v-title">法人/被授权委托人信息</div>
          <a-form-model-item
            :label="rules.clientName[0].title"
            prop="clientName"
          >
            <a-input
              v-model="model.clientName"
              :placeholder="rules.clientName[0].message"
            />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.clientType[0].title"
            prop="clientType"
          >
            <a-select v-model="model.clientType">
              <a-select-option
                v-for="item in config.client_type"
                :value="item"
                :key="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
            <!--            <a-select-->
            <!--              v-model="model.clientType"-->
            <!--              :default-value="model.clientType"-->
            <!--            >-->
            <!--              <a-select-option-->
            <!--                v-for="item in config.client_type"-->
            <!--                value="item"-->
            <!--                :key="item"-->
            <!--              >-->
            <!--                {{ item }}-->
            <!--              </a-select-option>-->
            <!--            </a-select>-->
          </a-form-model-item>

          <a-form-model-item
            :label="rules.clientCardNumber[0].title"
            prop="clientCardNumber"
          >
            <a-input
              v-model="model.clientCardNumber"
              :placeholder="rules.clientCardNumber[0].message"
            />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.clientPhone[0].title"
            prop="clientPhone"
          >
            <a-input
              v-model="model.clientPhone"
              :placeholder="rules.clientPhone[0].message"
            />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.clientForPhone[0].title"
            prop="clientForPhone"
          >
            <a-input
              v-model="model.clientForPhone"
              :placeholder="rules.clientForPhone[0].message"
            />
          </a-form-model-item>

          <a-form-model-item
            :label="rules.clientMail[0].title"
            prop="clientMail"
          >
            <a-input
              v-model="model.clientMail"
              :placeholder="rules.clientMail[0].message"
            />
          </a-form-model-item>

          <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
            <a-button size="large" style="margin-right: 12px;" @click="prev">
              上一步
            </a-button>
            <a-button htmlType="submit" type="primary" size="large">
              下一步
            </a-button>
          </a-form-item>
        </a-form-model>
      </div>
    </a-card>
  </div>
</template>

<script>
import storage from "@/utils/storage";
import { updateAccount } from "@/api/account";
import { mapGetters } from "vuex";
import area from "china-area-data";

export default {
  data() {
    const step2Info = storage.getItem("USER_AUTH_STEP2") || {};
    const step3Info = storage.getItem("USER_AUTH_STEP3") || { cLength: "" };

    let areas = [];

    if (step3Info.cArea) {
      areas = step3Info.cArea.split(" ");
    }

    return {
      configData: [],
      model: {
        ...step2Info,
        ...step3Info
      },
      address: {
        province: { code: 0, name: areas[0] || "" },
        city: { code: 0, name: areas[1] || "" },
        county: { code: 0, name: areas[2] || "" },
        town: { code: 0, name: "" }
      }
    };
  },
  watch: {
    model: {
      handler() {
        storage.setItem("USER_AUTH_STEP3", this.model);
      },
      deep: true
    },
    "model.cWork"() {
      this.model.cProduct = "";
    }
  },
  created() {
    this.model.cName = this.account.name;
  },
  computed: {
    ...mapGetters(["account", "config"]),
    currentProduct() {
      let current = [];
      for (const item of this.config.c_types) {
        if (this.model.cWork == item.name) {
          current = item.c_types;
        }
      }

      return current;
    },
    provinces() {
      return area[86];
    },
    cities() {
      return area[this.address.province.code];
    },
    counties() {
      return area[this.address.city.code];
    },
    towns() {
      return area[this.address.county.code];
    },

    rules() {
      return {
        cName: [
          {
            title: "单位名称",
            required: true,
            message: "请输入单位名称",
            trigger: "blur"
          }
        ],
        cardType: [
          {
            title: "证件类型",
            required: true,
            message: "请输入证件类型",
            trigger: "blur"
          }
        ],
        cLength: [
          {
            title: "经营期限至",
            required: true,
            message: "请输入经营期限",
            trigger: "blur"
          }
        ],
        cType: [
          {
            title: "单位性质",
            required: true,
            message: "请输入单位性质",
            trigger: "blur"
          }
        ],
        cCard: [
          {
            title: "组织机构代码",
            required: true,
            trigger: "blur",
            message: "请输入组织机构代码"
          }
        ],
        cArea: [
          {
            title: "通讯地址",
            required: true,
            trigger: "blur",
            message: "请输入地区"
          }
        ],
        cAddress: [
          {
            title: "证件地址",
            required: true,
            message: "请输入证件地址",
            trigger: "blur"
          }
        ],
        cWork: [
          {
            title: "主营行业",
            required: false,
            message: "请输入主营行业",
            trigger: "blur"
          }
        ],
        cProduct: [
          {
            title: "主营产品/业务",
            required: false,
            message: "请输入主营产品/业务",
            trigger: "blur"
          }
        ],
        cWeb: [
          {
            title: "企业网址",
            required: false,
            message: "请输入企业网址",
            trigger: "blur"
          }
        ],
        country: [
          {
            title: "国家地区",
            required: false,
            message: "请输入国家地区",
            trigger: "blur"
          }
        ],
        area: [
          {
            title: "所在地",
            required: false,
            message: "请输入所在地",
            trigger: "blur"
          }
        ],
        cStreet: [
          {
            title: "街道地址",
            required: false,
            message: "请输入街道地址",
            trigger: "blur"
          }
        ],
        cPhone: [
          {
            title: "联系电话",
            required: false,
            message: "请输入联系电话",
            trigger: "blur"
          }
        ],
        cSend: [
          {
            title: "传真号码",
            required: false,
            message: "请输入传真号码",
            trigger: "blur"
          }
        ],
        clientName: [
          {
            title: "法人/被授权委托人姓名",
            required: true,
            message: "请输入法人/被授权委托人姓名",
            trigger: "blur"
          }
        ],
        clientType: [
          {
            title: "法人/被授权委托人证件类型",
            required: true,
            message: "请输入证件类型",
            trigger: "blur"
          }
        ],
        clientCardNumber: [
          {
            title: "法人/被授权委托人证件号码",
            required: true,
            message: "请输入证件号码",
            trigger: "blur"
          }
        ],
        clientPhone: [
          {
            title: "法人/被授权委托人手机号码",
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          }
        ],
        clientForPhone: [
          {
            title: "法人/被授权委托人应急手机号码",
            required: false,
            message: "请输入应急手机号码",
            trigger: "blur"
          }
        ],
        clientMail: [
          {
            title: "法人/被授权委托人电子邮箱",
            required: false,
            message: "请输入电子邮箱",
            trigger: "blur"
          }
        ]
      };
    }
  },
  methods: {
    handleSelect(type, code, name) {
      this.address[type].name = name;
      this.address[type].code = code;
      this.model.cArea =
        this.address.province.name +
        " " +
        this.address.city.name +
        " " +
        this.address.county.name;
    },
    prev() {
      this.$router.go(-1);
    },
    handleDateChange(item) {
      this.model.cLength = item.format("YYYY-MM-DD HH:mm:ss");
    },
    onSubmit(e) {
      e.preventDefault();
      this.model.cArea =
        this.address.province.name +
        " " +
        this.address.city.name +
        " " +
        this.address.county.name;
      this.$refs.form.validate(async valid => {
        if (valid) {
          await updateAccount({
            ...this.account,
            ...this.model
          });

          this.$router.push("/user/auth/step4");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.user-auth {
  .v-title {
    margin-bottom: 12px;
  }
  .auth-title {
    padding-left: 30px;
    margin-bottom: 30px;

    .title {
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid @border-color;
      color: @primary-color;
      padding-bottom: 4px;
    }

    .desc {
      padding-top: 8px;
      font-size: 16px;
      color: @text-color-2;
    }
  }

  .auth-content {
    width: 720px;
    padding: 10px 0;
    margin: 0 auto;

    .documents-wrapper {
      margin: 40px 0 0;

      .document-item {
        font-size: 18px;
        width: 240px;
        margin: 0 auto 12px;
        text-align: left;

        a {
          text-decoration: underline;
        }
      }
    }

    .next-wrapper {
      width: 240px;
      margin: 30px auto 12px;
      text-align: left;
    }
  }
}

.upload-wrapper {
  display: flex;
  color: @primary-color;
  align-items: center;

  .example-wrapper {
    cursor: pointer;
    .icon-right {
      width: 10px;
      height: 10px;
    }
  }
}
</style>
